<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="min-h-screen bg-gray-50 p-6">
<!-- 搜索区域 -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-4">
<div class="flex items-center gap-4">
<div class="relative flex-1 max-w-md">
<el-input
v-model="searchKeyword"
placeholder="请输入项目部名称"
class="w-full !rounded-button"
:prefix-icon="Search"
/>
</div>
<el-button type="primary" :icon="Search" class="!rounded-button whitespace-nowrap">
搜索
</el-button>
</div>
</div>
<!-- 操作区域 -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-4">
<div class="flex justify-between items-center mb-4">
<div class="flex gap-4">
<el-button type="primary" :icon="Plus" class="!rounded-button whitespace-nowrap" @click="dialogVisible = true">
新增项目部
</el-button>
<el-button :icon="Refresh" class="!rounded-button whitespace-nowrap">
刷新
</el-button>
</div>
</div>
<!-- 表格 -->
<el-table
:data="tableData"
style="width: 100%"
height="600"
:header-cell-style="{ background: '#f5f7fa' }"
@sort-change="handleSortChange"
>
<el-table-column
prop="name"
label="项目部名称"
sortable
show-overflow-tooltip
/>
<el-table-column
prop="structure"
label="项目部组织结构"
show-overflow-tooltip
/>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip
/>
<el-table-column
prop="deviceCount"
label="设备数量"
sortable
show-overflow-tooltip
/>
<el-table-column
prop="cameraCount"
label="摄像头数量"
sortable
show-overflow-tooltip
/>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
link
@click="handleEdit(scope.row)"
class="whitespace-nowrap"
>
编辑
</el-button>
<el-button
type="danger"
:icon="Delete"
link
@click="handleDelete(scope.row)"
class="whitespace-nowrap"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="flex justify-end mt-4">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 50]"
:total="total"
layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
<!-- 新增项目部弹窗 -->
<el-dialog
v-model="dialogVisible"
title="新增项目部"
width="500px"
>
<el-form :model="formData" label-width="120px">
<el-form-item label="项目部名称">
<el-input v-model="formData.name" placeholder="请输入项目部名称" />
</el-form-item>
<el-form-item label="组织结构">
<el-select v-model="formData.structure" placeholder="请选择组织结构" class="w-full">
<el-option v-for="item in structureOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="项目部地址">
<el-input v-model="formData.address" placeholder="请输入项目部地址" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false" class="!rounded-button">取消</el-button>
<el-button type="primary" @click="handleSubmit" class="!rounded-button">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Search, Plus, Refresh, Edit, Delete, Select } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus';
const searchKeyword = ref('');
const dialogVisible = ref(false);
const formData = ref({
name: '',
structure: '',
address: ''
});
const structureOptions = ref([
{ value: '华南区域/广东省/深圳市', label: '华南区域/广东省/深圳市' },
{ value: '华东区域/上海市/浦东新区', label: '华东区域/上海市/浦东新区' },
{ value: '西南区域/四川省/成都市', label: '西南区域/四川省/成都市' },
{ value: '华北区域/北京市/海淀区', label: '华北区域/北京市/海淀区' },
{ value: '东北区域/辽宁省/沈阳市', label: '东北区域/辽宁省/沈阳市' }
]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const tableData = ref([
{
name: '华南区域项目部',
structure: '华南区域/广东省/深圳市',
address: '广东省深圳市南山区科技园南区高新南一道飞亚达科技大厦',
deviceCount: 128,
cameraCount: 86
},
{
name: '华东区域项目部',
structure: '华东区域/上海市/浦东新区',
address: '上海市浦东新区张江高科技园区科苑路88号',
deviceCount: 256,
cameraCount: 178
},
{
name: '西南区域项目部',
structure: '西南区域/四川省/成都市',
address: '四川省成都市高新区天府大道中段888号',
deviceCount: 96,
cameraCount: 64
},
{
name: '华北区域项目部',
structure: '华北区域/北京市/海淀区',
address: '北京市海淀区中关村软件园二期西扩区',
deviceCount: 180,
cameraCount: 125
},
{
name: '东北区域项目部',
structure: '东北区域/辽宁省/沈阳市',
address: '辽宁省沈阳市浑南新区创新路123号',
deviceCount: 75,
cameraCount: 52
}
]);
const handleSortChange = (val: { prop: string; order: string }) => {
console.log('排序变化', val);
};
const handleEdit = (row: any) => {
ElMessageBox.confirm(
`确认要编辑 ${row.name} 吗？`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
);
};
const handleDelete = (row: any) => {
ElMessageBox.confirm(
`确认要删除 ${row.name} 吗？`,
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
);
};
const handleSizeChange = (val: number) => {
pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
currentPage.value = val;
};
</script>
<style scoped>
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.el-input :deep(.el-input__wrapper) {
border-radius: 6px;
box-shadow: 0 0 0 1px #dcdfe6;
}
.el-input :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px var(--el-color-primary);
}
.el-table {
border-radius: 8px;
overflow: hidden;
}
</style>
